import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { Banner, UserContent, MyTop, UserPlaylists, VideoBanner, Main } from './components'
import { callGetNewsApi } from 'utils/networking';
import { useDispatch } from 'react-redux';
import { setSteamVideo } from 'redux/actions/CoverActions';
import { useLocation } from 'react-router-dom/cjs/react-router-dom';

const useStyles = makeStyles(theme => ({
    root: {
        height: '100%',
        width: '100%',
        overflow: 'hidden',
    },

}));

function ArtistProfile(props) {
    const { data, className, ...rest } = props;
    const classes = useStyles();
    const dispatch = useDispatch();
    const location = useLocation()
    const [mArtist, setArtist] = useState({})

    useEffect(() => {
        getServerVideoProps()
        loadArtistAlbums()
    }, [])
    const getServerVideoProps = async () => {
        callGetNewsApi('cover/steam_video', dispatch, (data) => {
            dispatch(setSteamVideo(data));
        });
    }

    let artist_id = location.state.artist_link ? location.state.artist_link : location.state.id

    const loadArtistAlbums = async () => {

        callGetNewsApi(`song/artist_media?artist_id=${artist_id}}`, dispatch, (data) => {
            setArtist(data);
        })
    }

    return (
        <div className={clsx(classes.root)} >
            {/* <VideoBanner /> */}
            <Banner data={Object.keys(mArtist).length ? mArtist : location.state} />
            <UserContent data={mArtist} />
            <MyTop data={mArtist} />
            <UserPlaylists data={mArtist} />
            <Main data={mArtist} />
        </div>
    )
}

ArtistProfile.propTypes = {
    /**
     * External classes
     */
    className: PropTypes.string,
};

export default ArtistProfile

